<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表属性</title>

    <style>
        /*ul>li{*/
        /*    !*无序列表变成有序列表*!*/
        /*    list-style-type: decimal;*/
        /*}*/

        /*ol>li{*/
        /*    !*有序列表变无序列表*!*/
        /*    list-style-type: disc;*/
        /*}*/

        /*将实心圆变成图片*/
        ul>li{
            /*默认图片在外侧*/
            list-style-image: url("../resource/list-img.jpg");
            border: 1px solid red;
            /*将图片设置在里面*/
            list-style-position: inside;

        }

        /*简写*/
        ol>li{
            list-style: none url("../resource/list-img.jpg") inside;
        }


    </style>


</head>
<body>


<ul>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
</ul>

<ol>
    <li>我是有序列表</li>
    <li>我是有序列表</li>
    <li>我是有序列表</li>
    <li>我是有序列表</li>
    <li>我是有序列表</li>
</ol>



</body>
</html>